<!--
 * @Description:
 * @Author: dh
 * @Date: 2022-01-21 13:41:19
 * @LastEditors: dh
 * @LastEditTime: 2022-12-28 14:37:46
-->
<template>
	<div style="border: 1px solid">
		<h2>父组件</h2>
		<p>msg1：{{ msg1 }}</p>
		<p>msg2：{{ msg2 }}</p>
		<p>msg3：{{ msg3 }}</p>
	</div>

	<div style="border: 1px solid; margin-top: 40px">
		<h2>子组件</h2>
		<my-input v-model.toLowerCase="msg1" v-model:msg2="msg2" v-model:msg3.toUpperCase="msg3" />
	</div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue';

export default defineComponent({
	components: {
		myInput: defineAsyncComponent(() => import('./components/my-input.vue')),
	},
	data() {
		return {
			msg1: '1',
			msg2: '2',
			msg3: '3',
		};
	},
});
</script>

<!-- TODO 通过defineAsyncComponent加载异步配合import 函数模式便可以分包 -->
<!-- <script setup lang="ts">
import { defineAsyncComponent } from 'vue';
const myInput = defineAsyncComponent(() => import('./components/my-input.vue'));
</script> -->
